<template>
	<view class="page">
		<view class="feedback-title">
			<text>张某山烟草店</text>	
		</view>
		<view class="feedback-body">
			<textarea placeholder="请输入反馈内容,至少输入10个字符..." v-model="sendDate.content" class="feedback-textare" />
			</view>
		
		<view class="feedback-body feedback-uploader oa-uploader">
			<view class="uni-uploader">
				
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file" style="position: relative;">
								<oa-image class="uni-uploader__img" :src="image"></oa-image>
								<view class="close-view" @tap="close(index)" :class="'bg-' + themeColor.name">x</view>
							</view>
						</block>
						<view class="uni-uploader__input-box" v-if="imageList.length < 10">
							<view class="uni-uploader__input" @tap="uploadImage"></view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="feedback-titles">
			<text>反馈类型</text>
		</view>
		<view class="category-list">
			
		<view class="box_1" @tap.stop="navTo(`/pages/set/feedback/detail?id=1`)">
			<span>拜访签到</span>
		</view>
		<view class="box_1" @tap.stop="navTo(`/pages/set/feedback/detail?id=1`)">
			<span>经营分析</span>
		</view>
		<view class="box_1" @tap.stop="navTo(`/pages/set/feedback/detail?id=1`)">
			<span>终端形象</span>
		</view>
		<view class="box_1" @tap.stop="navTo(`/pages/set/feedback/detail?id=1`)">
			<span>信息采集</span>
		</view>
		<view class="box_1" @tap.stop="navTo(`/pages/set/feedback/detail?id=1`)">
			<span>任务表注</span>
		</view>
		<view class="box_1" @tap.stop="navTo(`/pages/set/feedback/detail?id=1`)">
			<span>信息反馈</span>
		</view>
		
		
		</view>
		
	
		<button
			class="confirm-btn"
			:class="'bg-' + themeColor.name"
			:disabled="btnLoading"
			:loading="btnLoading"
			@tap="send"
		>
			提交
		</button>
		
	</view>
</template>

<script>
import { opinionCreate } from '@/api/userInfo';
export default {
	data() {
		return {
			
		
			imageList: [],
		
			sendDate: {
				type: '1',
				covers: '',
				content: '',
				contact_way: ''
			},
			btnLoading: false
		};
	},
	
	onShow() {
		uni.setNavigationBarColor({
		    frontColor: '#ffffff',
		    backgroundColor: this.themeColor.color,
		    animation: {
		        duration: 400,
		        timingFunc: 'easeIn'
		    }
		})
	},
	methods: {
		// 监听反馈类型事件
		initData() {
			this.hasLogin = true;
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.themeColor.color,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		navTo(route) {
			if (!route) return;
			if (!this.hasLogin) {
				uni.removeStorageSync('backToPage');
				this.$mRouter.push({
					route: '/pages/public/login'
				});
			} else {
				this.$mRouter.push({
					route
				});
			}
		},
		// 打开相册选图
		uploadImage() {
			const _this = this;
			uni.chooseImage({
				count: 9, // 最多一次可以选择的图片张数
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机
				success: function(res) {
					if (_this.imageList.length + res.tempFiles.length > 9) {
            _this.$mHelper.toast('不要贪心哦，最多只可上传9张照片');
            return;
					}
					_this.handleUploadFile(res.tempFilePaths);
				}
			});
		},
		// 依次上传图片
		handleUploadFile(data) {
			this.$mHelper.toast('上传成功');
		},
		// 删除已选中图片
		close(e) {
			this.imageList.splice(e, 1);
		},
		// 快速输入
		chooseMsg() {
			uni.showActionSheet({
				itemList: this.msgContents,
				success: res => {
					this.sendDate.content = this.msgContents[res.tapIndex];
				}
			});
		},
		// 发送反馈
		async send() {
			this.$mHelper.toast('意见反馈成功');
		}
	},
	
	
};
</script>

<style lang="scss">
page {
	background-color: $page-color-base;
}
/*问题反馈*/
.feedback-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-base;
	margin-top: $spacing-base;
	font-size: $font-base;
	color: #808080;
	margin-left: 70%;
	
}

.feedback-titles{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-base;
	margin-top: $spacing-base;
	font-size: $font-base;
	color: #808080;
	
}





.feedback-uploader {
	padding: 22upx 20upx;
}
.box_1{
		width: 30%;
		height: 50px;
		margin-top: 5%;
		margin-left:2%;
		border: 1px #cecece solid;
		border-radius: 50upx;
		span{
			font-size: 15px;
			line-height: 48px;
			margin-left: 22%;
		}
		
	}
	.box_1:hover{
		background-color:#00b551;
	}
	.category-list {
		width: 100%;
		
		border-bottom: solid 2upx #f6f6f6;
		display: flex;
		flex-wrap: wrap;
		
	
		.category {
			width: 25%;
			margin-top: 25upx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			border: 1px red solid;
			
	
			
	
			.share-btn {
				height: 142upx;
				text-align: left;
				background: none;
				padding: 0;
				margin: 0;
				
				
			}
	
			.share-btn:after {
				border: none;
				border-radius: none;
				
			}
		}
	}
</style>
